/* ==================
          阴影
 ==================== */

.shadow {
	box-shadow: var(--ui-Shadow);
	&-sm {
		box-shadow: var(--ui-Shadow-sm);
	}
	&-lg {
		box-shadow: var(--ui-Shadow-lg);
	}
	&-inset {
		box-shadow: var(--ui-Shadow-inset);
	}
	@each $color, $value in $colors {
		@at-root .shadow-#{$color} {
			box-shadow: 0 .5em 1em rgba($value, var(--ui-Shadow-opacity));
		}
		&-sm.shadow-#{$color} {
			box-shadow:  0 .125em .25em rgba($value, var(--ui-Shadow-opacity));
		}
		&-lg.shadow-#{$color} {
			box-shadow:  0 1em 3em rgba($value, var(--ui-Shadow-opacity-lg));
		}
	}

	&-warp {
		position: relative; 
	}
	&-warp:before,
	&-warp:after {
		position: absolute;
		content: '';
		bottom: -10rpx;
		left: 20rpx;
		width: calc(50% - #{40rpx});
		height: 30rpx;
		transform: skew(0deg, -6deg);
		transform-origin: 50% 50%;
		background-color: rgba(0, 0, 0, var(--ui-Shadow-opacity));
		filter: blur(20rpx);
		z-index: -1;
		opacity: 0.5;
	}
	&-warp:after {
		right: 20rpx;
		left: auto;
		transform: skew(0deg, 6deg);
	}
	&-blur {
		position: relative;
	}
	&-blur::before {
		content: '';
		display: block;
		background: inherit;
		filter: blur(20rpx);
		position: absolute;
		width: 100%;
		height: 100%;
		top: .5em;
		left: .5em;
		z-index: -1;
		opacity: var(--ui-Shadow-opacity-lg);
		transform-origin: 0 0;
		border-radius: inherit;
		transform: scale(1, 1);
	}
}
.drop-shadow {
	filter: drop-shadow(0 0 30rpx rgba(0, 0, 0, 0.1));
	&-sm {
		filter: drop-shadow( 0 4rpx 4rpx rgba(0, 0, 0, 0.06));
	}
	&-lg {
		filter: drop-shadow( 0 30rpx 60rpx rgba(0, 0, 0, 0.2));
	}
	@each $color, $value in $colors {
		@at-root .drop-shadow-#{$color} {
			filter: drop-shadow( 0 15rpx 15rpx rgba(darken($value, 10%), 0.3));
		}
		&-sm.drop-shadow-#{$color} {
			filter: drop-shadow( 0 4rpx 4rpx rgba(darken($value, 10%), 0.3));
		}
		&-lg.drop-shadow-#{$color} {
			filter: drop-shadow( 0 50rpx 100rpx rgba(darken($value, 10%), 0.2));
		}
	}
}
